<template>
	<div class="setting-base-wrap" v-if="currElement">
		<p class="page-title blod">基础样式</p>
		<el-collapse v-model="activeNames">
			<el-collapse-item title="字体：" name="4">
				<div class="attr-item-edit-wrapper">
					<p class="attr-item-title">字体大小：</p>
					<div class="col-2 attr-item-edit-input">
						<el-input-number size="mini" :value="currElement.commonStyle.fontSize" @change="onValueChange({'fontSize': $event})" controls-position="right" :min="0" />
					</div>
				</div>
				<div class="attr-item-edit-wrapper">
					<p class="attr-item-title">字体类型：</p>
					<div class="col-2 attr-item-edit-input">
						<el-select size="mini" :value="currElement.commonStyle.fontFamily" @change="onValueChange({'fontFamily': $event})">
							<el-option v-for="item in fontFamilyList" :key="item.value" :label="item.label" :value="item.value" />
						</el-select>
					</div>
				</div>
				<div class="attr-item-edit-wrapper">
					<p class="attr-item-title">字体粗细：</p>
					<div class="col-2 attr-item-edit-input">
						<el-input-number size="mini" :value="currElement.commonStyle.fontWeight" @change="onValueChange({'fontWeight': $event})" controls-position="right" :min="300" :step="100" :max="900" />
					</div>
				</div>
				<div class="attr-item-edit-wrapper">
					<p class="attr-item-title">行间距：</p>
					<div class="col-2 attr-item-edit-input">
						<el-input-number size="mini" :value="currElement.commonStyle.lineHeight" @change="onValueChange({'lineHeight': $event})" controls-position="right" :min="0" :step="0.1" />
					</div>
				</div>
				<div class="attr-item-edit-wrapper">
					<p class="attr-item-title">字间距：</p>
					<div class="col-2 attr-item-edit-input">
						<el-input-number size="mini" :value="currElement.commonStyle.letterSpacing" @change="onValueChange({'letterSpacing': $event})" controls-position="right" :min="0" />
					</div>
				</div>
				<div class="attr-item-edit-wrapper" v-if="!aliasAct">
					<p class="attr-item-title">对齐方式：</p>
					<div class="sizeAndPosition-wrapper">
						<div class="align-type-item clearFlex" @click="handleTextAlignClick('left')">
							<el-tooltip effect="dark" content="左对齐" placement="bottom">
								<i class="iconfont icon-text-align-left"></i>
							</el-tooltip>
						</div>
						<div class="align-type-item clearFlex" @click="handleTextAlignClick('center')">
							<el-tooltip effect="dark" content="居中对齐" placement="bottom">
								<i class="iconfont icon-text-align-center"></i>
							</el-tooltip>
						</div>
						<div class="align-type-item clearFlex" @click="handleTextAlignClick('right')">
							<el-tooltip effect="dark" content="右对齐" placement="bottom">
								<i class="iconfont icon-text-align-right"></i>
							</el-tooltip>
						</div>
					</div>
				</div>

				<div class="attr-item-edit-wrapper">
					<p class="attr-item-title">字体颜色：</p>
					<div class="attr-item-edit-input">
						<el-color-picker size="mini" :value="currElement.commonStyle.color"  @active-change='changeColor' @change="onValueChange({'color': $event})"></el-color-picker>
					</div>
				</div>
			</el-collapse-item>
      <!-- 分割线 -->
      <div class="line-between "></div>
			<el-collapse-item title="背景&&透明度：" name="5">
				<div class="attr-item-edit-wrapper">
					<p class="attr-item-title">背景颜色：&nbsp;&nbsp;&nbsp;</p>
					<div class="attr-item-edit-input no-top">
						<el-color-picker size="mini" :show-alpha="true" :value="currElement.commonStyle.backgroundColor" @change="onValueChange({'backgroundColor': $event})"></el-color-picker>
					</div>
				</div>

				<div class="attr-item-edit-wrapper">
					<p class="attr-item-title">透明度：</p>
					<div class="col-2 attr-item-edit-input">
						<el-input-number size="mini" :value="currElement.commonStyle.opacity" @change="onValueChange({'opacity': $event})" controls-position="right" :min="0" :max="1" :step="0.1" />
					</div>
				</div>
			</el-collapse-item>
		</el-collapse>
	</div>
</template>

<script>
	import { mapState, mapGetters, mapMutations } from 'vuex'
	import { ceil, subtract, divide, throttle } from 'lodash'

	export default {
		components: {},
		props: {
			ifShowTopThreeTitle: {
				default: true,
				type: Boolean
			}
		},
		data() {
			return {
				aliasAct: true,
				activeNames: ['4','5'],
				alignTypeList: [{
					title: '左对齐',
					icon: 'iconfont icon-align-left',
					type: 'l'
				}, {
					title: '上对齐',
					icon: 'iconfont icon-align-top',
					type: 't'
				}, {
					title: '右对齐',
					icon: 'iconfont icon-align-right',
					type: 'r'
				}, {
					title: '下对齐',
					icon: 'iconfont icon-align-bottom',
					type: 'b'
				}, {
					title: '垂直居中对齐',
					icon: 'iconfont icon-align-middle',
					type: 'tb'
				}, {
					title: '水平居中对齐',
					icon: 'iconfont icon-align-center',
					type: 'lr'
				}],
				// 'none', 'solid', 'dashed', 'dotted', 'double'
				borderStyleList: [{
					label: '实线',
					value: 'solid'
				}, {
					label: '虚线',
					value: 'dashed'
				}, {
					label: '点状',
					value: 'dotted'
				}, {
					label: '双线',
					value: 'double'
				}],
				boxShadow: {
					h: 0,
					v: 0,
					blur: 0,
					spread: 0,
					color: '#000000'
				},
				fontFamilyList: [{
					label: '微软雅黑',
					value: 'Microsoft YaHei'
				}, {
					label: '幼圆',
					value: 'YouYuan'
				}, {
					label: '隶书',
					value: 'LiSu'
				}, {
					label: '楷体',
					value: 'KaiTi'
				}, {
					label: '方正舒体',
					value: 'FZShuTi'
				}, {
					label: '方正姚体',
					value: 'FZYaoti'
				}, {
					label: '仿宋',
					value: 'FangSong'
				}, {
					label: '华文彩云',
					value: 'STCaiyun'
				}, {
					label: 'Arial',
					value: 'Arial'
				}, {
					label: 'Tohama',
					value: 'Tohama'
				}, {
					label: 'Times New Roman',
					value: 'Times New Roman'
				}, {
					label: 'Helvetica',
					value: 'Helvetica'
				}]
			}
		},
		computed: {
			...mapState('programs', ['pageData']),
			...mapGetters('programs', [
				'currElement',
				'hasCurrElement'
			]),
			_rotate: {
				get() {
					return this.currElement.commonStyle.rotate
				},
				set(rotate) {
					this.onValueChange({
						rotate
					})
				}
			}
		},
		watch: {
			currElementUUID() {
				// 设置boxShadow
				this.$nextTick(() => {
					this.initBoxShadowEdit()
				})
			},
			activeNames() {},
			currElement: {
				deep: true,
				immediate: true,
				handler(v1, v2) {
					if(v1.elName === 'sxc-text' && v1.propsValue.textDisType === 1) {
						this.aliasAct = false;
					} else {
						this.aliasAct = true;
					}
				}
			}
		},
		created() {
			this.throttleAddHistory = throttle(this.addHistory, 3000)

		},
		mounted() {
			// this.currElement.commonStyle.fontSize=38;
			this.initBoxShadowEdit()
			if(this.currElement.title == "文字" || this.currElement.title == "天气") {
				this.$emit('closepop', false);
				//this.ifShowTopThreeTitle = false;
			} else {
				this.$emit('closepop', true);
				//this.ifShowTopThreeTitle = true;
			}
		},
		methods: {
			...mapMutations('programs', ['updateElementStyle']),
			/**
			 * 纪录一条历史纪录
			 * */
			addHistory() {

			},
			changeColor(colorValue){
				this.onValueChange({'color': colorValue});
			},
			onValueChange(value) {
				this.updateElementStyle(value)
				this.throttleAddHistory()
			},
			rotateChange(rotate) {
				this.updateElementStyle({
					rotate
				})
				this.throttleAddHistory()
			},
			/**
			 *
			 * @param type
			 */
			changeAlignType(type) {
				let canvasW = this.pageData.width
				let canvasH = this.pageData.height
				if(!this.hasCurrElement) {
					return
				}
				let eleW = this.currElement.commonStyle.width
				let eleH = this.currElement.commonStyle.height
				switch(type) {
					case 't':
						this.onValueChange({
							top: 0
						})
						break
					case 'b':
						this.onValueChange({
							top: subtract(canvasH - eleH)
						})
						break
					case 'l':
						this.onValueChange({
							left: 0
						})
						break
					case 'r':
						this.onValueChange({
							left: subtract(canvasW - eleW)
						})
						break
					case 'tb':
						this.onValueChange({
							top: ceil(divide(subtract(canvasH - eleH), 2), 2)
						})
						break
					case 'lr':
						this.onValueChange({
							left: ceil(divide(subtract(canvasW - eleW), 2), 2)
						})
						break
				}
			},
			/**
			 * 初始化阴影编辑对象
			 */
			initBoxShadowEdit() {
				if(!this.hasCurrElement) {
					return
				}
				let boxShadow = this.currElement.commonStyle.boxShadow
				let boxShadowEditConfig = {
					h: 0,
					v: 0,
					blur: 0,
					spread: 0,
					color: '#000000'
				}
				if(!boxShadow || boxShadow === 'none') {
					this.boxShadow = boxShadowEditConfig
					return
				}
				let str = boxShadow.split(' ')

				boxShadowEditConfig = {
					h: parseInt(str[0].replace('px', '')),
					v: parseInt(str[1].replace('px', '')),
					blur: parseInt(str[2].replace('px', '')),
					spread: parseInt(str[3].replace('px', '')),
					color: str[4]
				}
				this.boxShadow = boxShadowEditConfig
			},
			boxShadowChange() {
				let str = `${this.boxShadow.h}px ${this.boxShadow.v}px  ${this.boxShadow.blur}px  ${this.boxShadow.spread}px  ${this.boxShadow.color}`
				this.onValueChange({
					boxShadow: str
				})
			},
			/**
			 * 字体样式设置对齐方式
			 * @param str
			 */
			handleTextAlignClick(str) {
				this.onValueChange({
					textAlign: str
				})
			},
			/**
			 * 字体样式设置对齐方式
			 * @param str
			 */
			handleResizeClick(type) {
				if(type.includes('w')) {
					this.onValueChange({
						left: 0,
						width: this.pageData.width
					})
				}
				if(type.includes('h')) {
					this.onValueChange({
						top: 0,
						height: this.pageData.height
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import '../../../assets/scss/_variables.scss';
  .line-between{
    width: 100%;
    height: 1px;
    margin: 10px auto;
    background-color: #999999;
  }
	.sizeAndPosition-wrapper {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		width: 250px;
	}

	.align-type-item {
		flex: 1;
		cursor: pointer;
		text-align: center;
		&.clearFlex {
			width: 42px;
			flex: none;
		}
		i {
			line-height: 1;
			display: inline-block;
			padding: 6px;
			border-radius: 4px;
			background: rgba(37, 165, 137, 0.08);
		}
		&:hover {
			i {
				color: $white;
				background: $primary;
			}
		}
	}
</style>
